import React, { Component } from "react";
import { Animated, Text } from "react-native";
import View = Animated.View;

class Blink extends Component<
  {
    text: string;
  },
  {
    showText: boolean;
  }
> {
  state = {
    showText: true
  };

  componentDidMount() {
    setInterval(() => {
      this.setState(previousState => {
        return {
          showText: !previousState.showText
        };
      });
    }, 1000);
  }

  render() {
    const display = this.state.showText ? this.props.text : " ";
    return <Text>{display}</Text>;
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text={"xusheng"} />
        <Blink text={"fangling"} />
      </View>
    );
  }
}
